<template>
    <!-- 主题类型：秀场 -->
    <div class="list-show-component-item">
        <router-link class="list-show-component-img" v-if="info.content.stills"
                     :to="{name: 'Live', params: {channelid: info.content.channelId, programid: info.content.id}}">
            <img v-lazy="addCmdUrl(info.content.stills,600.100)"/>

        </router-link>
        <div class="list-show-component-img-label" v-if="info.content.status==1"><img
                src="../assets/images/live_preview.png"/></div>
        <div class="list-show-component-img-label" v-if="info.content.status==2"><img
                src="../assets/images/live_onlive.png"/></div>
        <div class="list-show-component-img-label" v-if="info.content.status==3"><img
                src="../assets/images/live_review.png"/></div>
        <router-link class="list-show-component-title"
                     :to="{name: 'Live', params: {channelid: info.content.channelId, programid: info.content.id}}">
            {{info.content.programName}}

        </router-link>
        <router-link class="list-show-component-info"
                     :to="{name: 'Index', params: {channelid: info.content.channelId}}">
            <div class="list-show-component-info-name">{{info.content.channelName}}
                <span>&nbsp;&nbsp;&nbsp;&nbsp;{{info.content.startTime&&this.toCommonTime(info.content.startTime)}}</span>
            </div>
            <div class="list-show-component-info-num">{{this.simpleNum(info.content.viewCount)}}看过</div>
            <div class="clearBoth"></div>
        </router-link>
    </div>
</template>

<script>
    export default {
        props: {
            info: {
                type: Object,
                default: function () {
                    return {};
                }
            },
        }
    }
</script>

<style>
    .list-show-component-item {
        padding: 0.4rem 0;
        margin: 0.4rem auto;
        border-bottom: 0.06rem solid #EDEDED;
        position: relative;
    }

    .list-show-component-img {
        display: block;
        width: 100%;
        margin: 0.3rem auto;
        padding-bottom: 80%;
        position: relative;
        /*float: left;*/
    }

    .list-show-component-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        top: 0;
    }

    .list-show-component-item .list-show-component-img-label img{
        position: absolute;
        right: 10px;
        top: 16px;
        height: 17px;
    }

    .list-show-component-title {
        font-size: 1.0rem;
        /*font-weight: bold;*/
        line-height: 1.3rem;
        max-height: 2.6rem;
        color: #444444;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        /*white-space: nowrap;*/
        text-decoration: none;
    }

    .list-show-component-title-label {
        color: #FFF;
        font-size: 0.9rem;
        line-height: 1.3rem;
        margin-top: 0.1rem;
        vertical-align: top;
        display: inline-block;
        padding: 0 0.3rem;
    }

    .list-show-component-info {
        font-size: 0.5rem;
        line-height: 1.4rem;
        color: #999999;
        display: block;
    }

    .list-show-component-info-name {
        float: left;
        width: 62%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list-show-component-info-num {
        width: 38%;
        float: right;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>